<!--
 * @description  : 真烟流动展示
 * @descriptionDetail: 真烟流动展示
 * @copyright    : 浙江烟草
 * @author       : lcm
 * @create       : 2022-09-27 09:58:58
-->

<template>
  <view>
    <!-- #ifdef H5-ONLY -->
    <theme-navbar
      :is-white="false"
      :title="title"
      :custom-back="goBack"
      style="z-index: 99999"
    >
      <view style="margin-right:20rpx;">
        <u-icon name="search" color="#fff" size="40" @tap="handlerShowSearch"></u-icon>
      </view>
    </theme-navbar>
    <!-- #endif -->
		<!-- #ifdef H5-WECHAT || H5-EMP -->
		 <fab-button :content="fContent" @fabtrigger="fabtrigger" />
		<!-- #endif -->
    <view style="padding-bottom:35px">
      <t-table
        :loading="loading"
        :headers="headerNum == 0 ? qyHeaders:qyHeaders0 "
        :contents="headerNum == 0? qyContents:qyContents0"
        loaderSize="100%"
        width="100%"
        :padding="[0, 0]"
        :sort-col="qySortCol"
        :sort-ways="['asc', 'inv']"
        :first-line-fixed="true"
        :bottom-computed-fixed="true"
        :computed-col="headerNum == 0 ? qyComputedCol:qyComputedCol0"
        textAlign="right"
        :col-height="150"
        first-col-bg-color="#ecf5ff"
        v-show="tabIndex==0"
        ref="table0"
        @tapCell="handleClick"
      ></t-table>
      <t-table
        :loading="loading"
        :headers="pgHeaders"
        :contents="pgContents"
        loaderSize="100%"
        width="100%"
        :padding="[0, 0]"
        :first-line-fixed="true"
        :sort-col="pgSortCol"
        :sort-ways="['asc', 'inv']"
        :bottom-computed-fixed="true"
        :computed-col="pgComputedCol"
        :default-col-width="220"
        :col-height="150"
        first-col-bg-color="#ecf5ff"
        v-show="tabIndex==1"
        ref="table1"
        @tapCell="handleClick"
      ></t-table>
      <t-table
        :loading="loading"
        :headers="lyHeaders"
        :contents="lyContents"
        loaderSize="100%"
        width="100%"
        :padding="[0, 0]"
        :first-line-fixed="true"
        :computed-col="lyComputedCol"
        :sort-col="lySortCol"
        :sort-ways="['asc', 'inv']"
        :bottom-computed-fixed="true"
        :default-col-width="220"
        :col-height="150"
        first-col-bg-color="#ecf5ff"
        v-show="tabIndex==2"
        ref="table2"
        @tapCell="handleClick"
      ></t-table>
    </view>
    <view>
      <u-popup mode="top" border-radius="30" :height="tabIndex==2 ? '60%' : '90%'" v-model="showSearch">
        <view style="width:100%;height:20px;background-color:#e0f2ff;color:#72bff6;font-size:16px;">
          数据截至日期：{{ formData.headerDateEnd }}
        </view>
        <u-card
          margin="0rpx"
          :full="true"
          :foot-border-top="false"
          :head-border-bottom="false"
          :show-head="false"
        >
          <template #body>
            <u-row gutter="16">
              <u-col span="4">
                <u-icon name="clock" label="时间选择"></u-icon>
              </u-col>
              <u-col span="3" v-for="(item, idx) in timeSelect" :key="idx">
                <u-tag class="tagsize" type="primary" :text="item.text" :mode="formData.cigTime == item.value ? 'dark' : 'plain'" @click="onClick(item.value)">
                </u-tag>
              </u-col>
            </u-row>
            <u-form style="padding-top:13px" :model="formData" ref="uForm">
              <u-form-item :label-width="labelWidth" label="开始日期:" prop="dateStart">
                <z-date placeholder="请选择" format="yyyy-MM-dd" v-model="formData.dateStart" />
              </u-form-item>
              <u-form-item :label-width="labelWidth" label="结束日期:" prop="dateEnd">
                <z-date placeholder="请选择" format="yyyy-MM-dd" v-model="formData.dateEnd" />
              </u-form-item>
            </u-form>
          </template>
        </u-card>
        <u-card
          margin="10rpx"
          :full="true"
          :foot-border-top="false"
          :head-border-bottom="false"
          box-shadow="#e5e5e5 0px 0px 50px"
        >
          <template #head>
            <u-row gutter="16">
              <u-col span="9">
                <u-icon name="minus-circle"></u-icon>卷烟单位
              </u-col>
            </u-row>
          </template>
          <template #body>
            <u-row gutter="16">
              <u-col span="3" v-for="(item, idx) in cigUnitSelect" :key="idx">
                <u-tag class="tagsize" type="primary" :text="item.text" :mode="formData.cigaUnit == item.value ? 'dark' : 'plain'" @click="changeUnit(item)">
                </u-tag>
              </u-col>
            </u-row>
          </template>
        </u-card>
        <u-card
          margin="10rpx"
          :full="true"
          :foot-border-top="false"
          :head-border-bottom="false"
          box-shadow="#e5e5e5 0px 0px 50px"
          v-show="tabIndex==0"
        >
          <template #head>
            <u-row gutter="16">
              <u-col span="9">
                <u-icon name="minus-circle"></u-icon>案件分类(万元)
              </u-col>
            </u-row>
          </template>
          <template #body>
            <u-row gutter="16">
              <u-col span="3" v-for="(item, idx) in cigTypeSelect" :key="idx">
                <u-tag class="tagsize" style="margin-bottom:5px" dictType="I_TRACK_CASE_TYPE" type="primary" :text="item.bcbName.replace('万元','')" size="default" :mode="formData.cigKind == item.bcbCode ? 'dark' : 'plain'" @click="formData.cigKind = item.bcbCode">
                </u-tag>
              </u-col>
            </u-row>
          </template>
        </u-card>
        <u-card
          margin="10rpx"
          :full="true"
          :foot-border-top="false"
          :head-border-bottom="false"
          box-shadow="#e5e5e5 0px 0px 50px"
          v-show="tabIndex==1"
        >
          <template #head>
            <u-row gutter="16">
              <u-col span="9">
                <u-icon name="minus-circle"></u-icon>展示数量
              </u-col>
            </u-row>
          </template>
          <template #body>
            <u-row gutter="16">
              <u-col span="4">
                <u-input type="number" placeholder="请输入展示前几位" maxlength="10px" v-model="formData.cigaRank" />
              </u-col>
            </u-row>
          </template>
        </u-card>
        <u-card
          margin="10rpx"
          :full="true"
          :foot-border-top="false"
          :head-border-bottom="false"
          box-shadow="#e5e5e5 0px 0px 50px"
          v-show="tabIndex==1"
        >
          <template #head>
            <u-row gutter="16">
              <u-col span="9">
                <u-icon name="minus-circle"></u-icon>卷烟品规
              </u-col>
            </u-row>
          </template>
          <template #body>
            <u-row gutter="16">
              <u-col span="4">
                <u-input type="text" placeholder="请输入卷烟品规" v-model="formData.brandUuids" />
              </u-col>
            </u-row>
          </template>
        </u-card>
        <u-row gutter="16">
          <u-col span="6" text-align="center" style="margin-top:10px">
            <u-button type="primary" size="medium" @tap="restQySelect">
              全部重置
            </u-button>
          </u-col>
          <u-col span="6" text-align="center" style="margin-top:10px">
            <u-button size="medium" @tap="search">
              确定
            </u-button>
          </u-col>
        </u-row>
      </u-popup>
    </view>
    <view class="end">
      <u-tabbar :list="list" bg-color="#ecf0f1" v-model="tabIndex" @change="change"></u-tabbar>
    </view>
  </view>
</template>
<script>
	import internalService from '@/service/internal/internal.service';
	import TTable from '@/components/t-table';
	import fabButton from '@/components/uni-fab.vue';

	import {
		ZDate,
	} from '@/components';
	import {
		dateUtils,
	} from '@/common/util.js';
	const screenWidth = uni.getSystemInfoSync().screenWidth;
	let date = new Date();
	export default {
		components: {
			TTable,
			ZDate,
			fabButton
		},
		data() {
			return {
				units: '',
				title: '真烟流动',
				labelWidth: 180,
				formData: {
					dateStart: dateUtils.dateFormat('yyyy-01-01', new Date()),
					dateEnd: dateUtils.dateFormat('yyyy-MM-' + (date.getDate() - 1).toString(), new Date()),
					newYearStart: dateUtils.dateFormat('yyyy-01-01', new Date()),
					newYearEnd: dateUtils.dateFormat('yyyy-MM-' + (date.getDate() - 1).toString(), new Date()),
					newMonthStart: dateUtils.dateFormat('yyyy-MM-01', new Date()),
					headerDateEnd: dateUtils.dateFormat('yyyy年MM月' + (date.getDate() - 1).toString() + '日', new Date()),
					cigaUnit: '2', //  单位
					cigKind: '', //  案件分类（万元）
					cigaRank: '', // 展示的品规数量
					brandUuids: '', // 卷烟品规
					cigTime: '0',
					cigaOutFlowType: '',
				},
				headerNum: '0',
				userInfoUuid: '',
				cigUnitSelect: [{
						text: '条',
						value: '1',
					},
					{
						text: '万支',
						value: '2',
					},
				], //
				cigTypeSelect: this.$u.dic.getByDictCode('I_TRACK_CASE_TYPE'),
				timeSelect: [{
						text: '当年',
						value: '0',
					},
					{
						text: '当月',
						value: '1',
					},
				],
				showSearch: false,
				showpgSearch: false,
				showlySearch: false,
				loading: true, // 列表加载提示
				qyHeaders: [{
						// 区域标题列
						label: [{
								label: '查获',
								evt: this.handleTapHeader,
							},
							{
								label: '被查获(万支)',
								evt: this.handleTapHeader,
							},
						],
						key: 'areaName',
						width: 0.7 * screenWidth,
						align: 'left',
					},
					{
						label: '卷烟数',
						key: 'zs',
						width: 0.5 * screenWidth,
						align: 'right',
					},
					{
						label: '占比',
						key: 'hjRatio',
						width: 0.5 * screenWidth,
						negativeColor: '#fa3534', // 负数颜色设置
						positiveColor: '#18b566', // 正数颜色设置
						align: 'right',
					},
					{
						label: '同比',
						key: 'zsRatio',
						width: 0.5 * screenWidth,
						negativeColor: '#fa3534',
						align: 'right',
					},
					{
						label: '省内数',
						key: 'snzs',
						width: 0.5 * screenWidth,
						align: 'right',
					},
					{
						label: '省外数',
						key: 'swzs',
						width: 0.5 * screenWidth,
						align: 'right',
					},
					{
						label: '不明数',
						key: 'bmzs',
						width: 0.5 * screenWidth,
						align: 'right',
					},
					{
						label: '案件数',
						key: 'ajs',
						width: 0.5 * screenWidth,
						align: 'right',
					},
					{
						label: '占比',
						key: 'hjajsRatio',
						width: 0.5 * screenWidth,
						negativeColor: '#fa3534', // 负数颜色设置
						positiveColor: '#18b566', // 正数颜色设置
						align: 'right',
					},
					{
						label: '同比',
						key: 'ajsRatio',
						width: 0.5 * screenWidth,
						negativeColor: '#fa3534',
						align: 'right',
					},
				],
				qyHeaders0: [{
						// 区域标题列
						label: [{
								label: '查获',
								evt: this.handleTapHeader,
							},
							{
								label: '被查获(万支)',
								evt: this.handleTapHeader,
							},
						],
						key: 'area_name',
						width: 0.7 * screenWidth,
						align: 'left',
					},
					{
						label: '卷烟数',
						key: 'chsl',
						width: 0.5 * screenWidth,
						negativeColor: '#fa3534',
						align: 'right',
					},
					{
						label: '占比',
						key: 'hjRatio',
						width: 0.5 * screenWidth,
						align: 'right',
					},
					{
						label: '同比',
						key: 'tbRatio',
						width: 0.5 * screenWidth,
						align: 'right',
					},
					{
						label: '市外卷烟数',
						key: 'snsl',
						width: 0.6 * screenWidth,
						align: 'right',
					},
					{
						label: '省外卷烟数',
						key: 'swsl',
						width: 0.6 * screenWidth,
						negativeColor: '#fa3534', // 负数颜色设置
						positiveColor: '#18b566', // 正数颜色设置
						align: 'right',
					},
				],
				qySortCol: [
					// 指定哪些列进行排序
					{
						key: 'zs',
						isNumber: true,
					},
					{
						key: 'hjRatio',
						isNumber: true,
					},
					{
						key: 'zsRatio',
						isNumber: true,
					},
					{
						key: 'snzs',
						isNumber: true,
					},
					{
						key: 'swzs',
						isNumber: true,
					},
					{
						key: 'bmzs',
						isNumber: true,
					},
					{
						key: 'ajs',
						isNumber: true,
					},
					{
						key: 'hjajsRatio',
						isNumber: true,
					},
					{
						key: 'ajsRatio',
						isNumber: true,
					},
					{
						key: 'hjzs',
						isNumber: true,
					},
					{
						key: 'swsl',
						isNumber: true,
					},
					{
						key: 'chsl',
						isNumber: true,
					},
					{
						key: 'hjRatio',
						isNumber: true,
					},
					{
						key: 'hbRatio',
						isNumber: true,
					},
				],
				qySortCol0: [
					// 指定哪些列进行排序
				],
				qyComputedCol: ['zs', 'snzs', 'swzs', 'bmzs', 'ajs', ], // 统计指定列数据
				qyComputedCol0: ['hjzs', 'swsl', 'chsl', 'hjRatio', 'tbRatio', ], // 统计指定列数据
				qyContents: [],
				qyContents0: [],

				pgHeaders: [{
						// 品规标题列
						label: '查获品规(万支)',
						key: 'brandName',
						width: 0.7 * screenWidth,
						align: 'left',
					},
					{
						label: '数量',
						key: 'zs',
						width: 0.5 * screenWidth,
						align: 'right',
					},
					{
						label: '占比',
						key: 'hjRatio',
						width: 0.5 * screenWidth,
						negativeColor: '#fa3534', // 负数颜色设置
						positiveColor: '#18b566', // 正数颜色设置
						align: 'right',
					},
					{
						label: '同比',
						key: 'zsRatio',
						width: 0.5 * screenWidth,
						negativeColor: '#fa3534',
						align: 'right',
					},
					{
						label: '省内',
						key: 'snzs',
					},
					{
						label: '省外',
						key: 'swzs',
						width: 0.5 * screenWidth,
						align: 'right',
					},
					{
						label: '不明',
						key: 'bmzs',
						width: 0.5 * screenWidth,
						align: 'right',
					},
				],
				pgSortCol: [
					// 指定哪些列进行排序
					{
						key: 'brandName',
						isNumber: true,
					},
					{
						key: 'zs',
						isNumber: true,
					},
					{
						key: 'hjRatio',
						isNumber: true,
					},
					{
						key: 'zsRatio',
						isNumber: true,
					},
					{
						key: 'snzs',
						isNumber: true,
					},
					{
						key: 'swzs',
						isNumber: true,
					},
					{
						key: 'bmzs',
						isNumber: true,
					},
				],
				pgComputedCol: ['zs', 'pgNum', 'snzs', 'swzs', 'bmzs', ], // 统计指定列数据
				pgContents: [],
				lyHeaders: [{
						// 来源地标题列
						label: '来源地(万支)',
						key: 'areaName',
						width: 0.7 * screenWidth,
						align: 'left',
					},
					{
						label: '卷烟数',
						key: 'jyNum',
						negativeColor: '#fa3534', // 负数颜色设置
						positiveColor: '#18b566',
						width: 0.7 * screenWidth, // 正数颜色设置
						align: 'right',
					},
					{
						label: '占比',
						key: 'jyRatio',
						negativeColor: '#fa3534',
						width: 0.7 * screenWidth,
						align: 'right',
					},
					{
						label: '同比',
						key: 'jyRatioTb',
						negativeColor: '#fa3534',
						width: 0.7 * screenWidth,
						align: 'right',
					},
					{
						label: '案件数',
						key: 'ajNum',
						negativeColor: '#fa3534', // 负数颜色设置
						positiveColor: '#18b566',
						width: 0.7 * screenWidth, // 正数颜色设置
						align: 'right',
					},
					{
						label: '占比',
						key: 'ajRatio',
						negativeColor: '#fa3534',
						width: 0.7 * screenWidth,
						align: 'right',
					},
					{
						label: '同比',
						key: 'ajRatioTb',
						negativeColor: '#fa3534',
						width: 0.7 * screenWidth,
						align: 'right',
					},
				],
				lySortCol: [
					// 指定哪些列进行排序
					{
						key: 'zs',
						isNumber: true,
					},
					{
						key: 'zsRatio',
						isNumber: true,
					},
				],
				lyComputedCol: ['zs', 'zsRatio', ], // 统计指定列数据
				lyContents: [],
				list: [{
						iconPath: '../../../static/storage/icon_qy.png',
						selectedIconPath: '../../../static/storage/icon_qyb.png',
						text: '区域',
					},
					{
						iconPath: '../../../static/storage/icon_pg.png',
						selectedIconPath: '../../../static/storage/icon_pgb.png',
						text: '品规',
					},
					{
						iconPath: '../../../static/storage/icon_ly.png',
						selectedIconPath: '../../../static/storage/icon_lyb.png',
						text: '来源地',
					},
				],
				tabIndex: 0,
				fContent: [{
					iconPath: require('@/static/search.png'),
					selectedIconPath: require('@/static/search.png'),
					text: '搜索',
					active: false,
				}],
			};
		},
		mounted() {
			// this.setRightBtns();
		},
		created() {
			let userInfo = JSON.parse(uni.getStorageSync('user'));
			this.userInfoUuid = userInfo.townOrgUuid || userInfo.cityOrgUuid || userInfo.provOrgUuid;
			this.lodingQy();
			this.lodingPg();
			this.lodingLy();
			console.log('分类', this.formData.cigKind);
			console.log('uuu', userInfo);
		},

		methods: {
			// 钉钉上设置右侧标题
			setRightBtns() {
				// #ifdef H5-DINGDING
				// 先放开右侧标题
				this.$deviceApi.setRight('', () => {}, true, true);
				// 设置右侧多按钮，苹果手机对此接口的格式要求比较严格，不能出现多余的符号
				let menuItemStr = '[{"id":"1","text":"搜索","iconId":"search"}]';
				this.$deviceApi.setMenu(JSON.parse(menuItemStr), (res) => {
					if (res.id == 1) {
						this.handlerShowSearch();
					}
				});
				// #endif
			},
			fabtrigger(btn) {
				if (btn.index == 0) {
					this.handlerShowSearch();
				}
			},
			lodingQy() {
				let paras = {
					orgUuid: '00000000001389361289593_9710_201',
					caseDateBegin: this.formData.dateStart,
					caseDateEnd: this.formData.dateEnd,
					syncDateBegin: this.formData.dateStart,
					syncDateEnd: this.formData.dateEnd,
					cigaUnit: this.formData.cigaUnit,
					cigaOutFlowType: this.formData.cigaOutFlowType,
					caseType: this.formData.cigKind,
				};
				this.loading = false;
				internalService.selectTrueCaseAreaList(1, 30, paras).then((dr) => {
					this.qyContents = dr.data;
				});
			},
			lodingQy0() {
				let paras = {
					orgUuid: '00000000001389361289593_9710_201',
					caseDateBegin: this.formData.dateStart,
					caseDateEnd: this.formData.dateEnd,
					cigaUnit: this.formData.cigaUnit,
				};
				this.loading = false;
				internalService.selectTrueCaseAreaOutList(1, 30, paras).then((dr) => {
					this.qyContents0 = dr.data;
				});
			},
			lodingPg() {
				let paras = {
					orgUuid: '00000000001389361289593_9710_201',
					caseDateBegin: this.formData.dateStart,
					caseDateEnd: this.formData.dateEnd,
					syncDateBegin: this.formData.dateStart,
					syncDateEnd: this.formData.dateEnd,
					cigaUnit: this.formData.cigaUnit,
					cigaRank: this.formData.cigaRank,
					brandUuids: this.formData.brandUuids,
				};
				this.loading = false;
				internalService.selectTrueCaseCigaList(1, 1000, paras).then((dr) => {
					this.pgContents = dr.data;
				});
			},
			lodingLy() {
				let paras = {
					orgUuid: '00000000001389361289593_9710_201',
					caseDateBegin: this.formData.dateStart,
					caseDateEnd: this.formData.dateEnd,
					syncDateBegin: this.formData.dateStart,
					syncDateEnd: this.formData.dateEnd,
					cigaUnit: this.formData.cigaUnit,
				};
				this.loading = false;
				internalService.selectTrueCaseSourceList(1, 1000, paras).then((dr) => {
					this.lyContents = dr.data;
				});
			},
			onClick(value) {
				this.formData.cigTime = value;
				if (this.formData.cigTime == 0) {
					this.formData.dateStart = this.formData.newYearStart;
					this.formData.dateEnd = this.formData.newYearEnd;
				} else if (this.formData.cigTime == 1) {
					this.formData.dateStart = this.formData.newMonthStart;
					this.formData.dateEnd = this.formData.newYearEnd;
				}
			},
			// 点击某一项进行进一步的操作
			handleClick({
				key,
				data,
			}) {
				console.log('点击', key, data);
				this.$u.toast('点击了' + data[key]);
			},
			// 点击标题细分项事件（idx对应label数组的下标）
			handleTapHeader(idx) {
				// TODO 添加对应的查询逻辑
				console.log('重新查询', idx);
				this.headerNum = idx;
				console.log('头', this.headerNum);
				if (idx == 0) {
					this.loading = true;
					this.formData.cigaOutFlowType = '01';
					this.lodingQy();
				} else if (idx == 1) {
					this.loading = true;
					this.formData.cigaOutFlowType = '02';
					this.lodingQy0();
				}
			},
			change(index) {
				this.tabIndex = index;
				if (index == 0) {
					this.title = '真烟流动';
				} else if (index == 1) {
					this.title = '查获品规';
				} else {
					this.title = '来源地';
				}
				console.log('标题', this.title);
			},
			changeUnit(item) {
				this.formData.cigaUnit = item.value;
				this.units = item.value;
			},
			handlerShowSearch() {
				this.showSearch = true;
			},
			restQySelect() {
				this.formData.dateStart = '';
				this.formData.dateEnd = '';
				this.formData.cigaRank = '';
				this.formData.brandUuids = '';
				this.formData.cigKind = '';
				this.formData.cigaUnit = '1';
				this.formData.cigTime = '';
			},
			search() {
				this.showSearch = false;
				this.lodingQy();
				this.lodingPg();
				this.lodingLy();
				if (this.units == '2') {
					this.qyHeaders[0].label[1].label = '被查获(万支)';
					this.qyHeaders0[0].label[1].label = '被查获(万支)';
					this.pgHeaders[0].label = '查获品规(万支)';
					this.lyHeaders[0].label = '来源地(万支)';
				} else if (this.units == '1') {
					this.qyHeaders[0].label[1].label = '被查获(条)';
					this.qyHeaders0[0].label[1].label = '被查获(条)';
					this.pgHeaders[0].label = '查获品规(条)';
					this.lyHeaders[0].label = '来源地(条)';
				}
			},
		},
	};
</script>
<style lang="scss" scoped>
	.end {
		width: 100%;
		position: fixed;
		bottom: 0rpx;
		z-index: 999;
	}

	.tagsize {
		height: 24px;
		width: 55px;
		text-align: center;
	}
</style>
